<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body class="no-skin">

	<!-- /section:basics/sidebar -->
	<div class="main-content">
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try {
					ace.settings.check('breadcrumbs', 'fixed')
				} catch (e) {
				}
			</script>

			<ul class="breadcrumb">
				<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">管理科目</a></li>
			</ul>
			<!-- /.breadcrumb -->

			<!-- #section:basics/content.searchbox -->
			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon"> <input type="text" placeholder="Search ..."
						class="nav-search-input" id="nav-search-input" autocomplete="off" /> <i
						class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div>
			<!-- /.nav-search -->

			<!-- /section:basics/content.searchbox -->
		</div>

		<!-- /section:basics/content.breadcrumbs -->
		<div class="page-content">
			<!-- #section:settings.box -->
			<div class="ace-settings-container" id="ace-settings-container">
				<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
					<i class="ace-icon fa fa-cog bigger-150"></i>
				</div>

				<div class="ace-settings-box clearfix" id="ace-settings-box">
					<div class="pull-left width-50">
						<!-- #section:settings.skins -->
						<div class="ace-settings-item">
							<div class="pull-left">
								<select id="skin-colorpicker" class="hide">
									<option data-skin="no-skin" value="#438EB9">#438EB9</option>
									<option data-skin="skin-1" value="#222A2D">#222A2D</option>
									<option data-skin="skin-2" value="#C6487E">#C6487E</option>
									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Choose Skin</span>
						</div>

						<!-- /section:settings.skins -->

						<!-- #section:settings.navbar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" /> <label
								class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
						</div>

						<!-- /section:settings.navbar -->

						<!-- #section:settings.sidebar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" /> <label
								class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
						</div>

						<!-- /section:settings.sidebar -->

						<!-- #section:settings.breadcrumbs -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" /> <label
								class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
						</div>

						<!-- /section:settings.breadcrumbs -->

						<!-- #section:settings.rtl -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" /> <label
								class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
						</div>

						<!-- /section:settings.rtl -->

						<!-- #section:settings.container -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" /> <label
								class="lbl" for="ace-settings-add-container"> Inside <b>.container</b>
							</label>
						</div>

						<!-- /section:settings.container -->
					</div>
					<!-- /.pull-left -->

					<div class="pull-left width-50">
						<!-- #section:basics/sidebar.options -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" /> <label
								class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
						</div>

						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" /> <label
								class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
						</div>

						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" /> <label
								class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
						</div>

						<!-- /section:basics/sidebar.options -->
					</div>
					<!-- /.pull-left -->
				</div>
				<!-- /.ace-settings-box -->
			</div>
			<!-- /.ace-settings-container -->

			<!-- /section:settings.box -->
			<div class="page-content-area">
				<!-- /.page-header -->

				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<div class="row">
							<div class="col-xs-12">
								<c:if test="${not empty message }">
									<script type="text/javascript">
										alert("${message }");
									</script>
								</c:if>
								<button id="addSubject" class="btn btn-primary">
									<span class="ace-icon fa fa-plus align-top bigger-125">添加科目</span>
								</button>
								<table id="sample-table-1" class="table table-striped table-bordered table-hover">
									<thead>

										<tr>
											<th>科目编号</th>
											<th>科目名</th>
											<th>科目描述</th>
											<th>科目题数</th>
											<th>总时长</th>
											<th>满分总分</th>
											<th>是否开启考试</th>
											<th><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>操作</th>

										</tr>
									</thead>

									<tbody>
										<c:forEach var="list" items="${subject }">
											<tr>
												<td>${list.id }</td>
												<td>${list.name }</td>
												<td>${list.description }</td>
												<td>${list.testCount }</td>
												<td>${list.totalTime }</td>
												<td>${list.totalScore }</td>
												<td>
													<c:choose>
														<c:when test="${list.status == 0 }">
															<input name="switch-field-1"  class="ace ace-switch ace-switch-6 subject-status" type="checkbox"/>
															<span class="lbl"></span>
														</c:when>
														<c:otherwise>
															<input name="switch-field-1"  checked class="ace ace-switch ace-switch-6 subject-status" type="checkbox"/>
															<span class="lbl"></span>
														</c:otherwise>
													</c:choose>
												</td>

												<td>
													<div class="hidden-sm hidden-xs btn-group">
														 <a title="修改科目" class="btn btn-xs btn-info editSubject"> <i class="ace-icon fa fa-pencil bigger-120"></i></a>
														<a href="${pageContext.request.contextPath }/teacher/deleteSubject/${list.id}" title="删除科目" onclick="if(confirm('确定删除?')==false)return false;" class="btn btn-xs btn-danger">
															<i class="ace-icon fa fa-trash-o bigger-120"></i>
														</a>
														<a title="管理科目学生" class="btn btn-primary btn-xs manage-subject-student-btn"><i class="ace-icon fa fa-users"></i></a>

													</div>
												</td>
											</tr>
										</c:forEach>

									</tbody>
								</table>
							</div>
							<!-- /.span -->
						</div>
						<!-- /.row -->
						<!-- PAGE CONTENT ENDS -->
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.page-content-area -->
		</div>
		<!-- /.page-content -->
	</div>
	<!-- /.main-content -->
	<div class="modal fade" id="subjectStudentModal" tabindex="-1" role="dialog"
		aria-labelledby="subjectSubjectModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="subjectSubjectModalLabel">
						管理学生科目:<label id="modalSubjectName"></label>
					</h4>
				</div>
				<div class="modal-body">
					<input type="hidden" id="subjectId" />
					<div id="subjectStudentContent" class="control-group"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						关闭
					</button>
					<button type="button" class="btn btn-primary" id="subjectStudentSaveBtn">
						保存
					</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="addSubjectModal" tabindex="-1" role="dialog"
		aria-labelledby="addSubjectModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="addSubjectModalLabel">添加科目信息</h4>
				</div>
				<div class="modal-body">
					<p>
						<label>科目名</label> <input name="subName" type="text">
					</p>
					<p>
						<label>科目描述</label> <input name="description" type="text">
					</p>
					<p>
						<label>科目题数</label> <input name="testCount" type="text">
					</p>
					<p>
						<label>总时长</label> <input name="totalTime" type="text">
					</p>
					<p>
						<label>满分总分</label> <input name="totalScore" type="text">
					</p>
					<p>
						<label>是否开启考试</label> <input name="switch-field-1"
							class="ace ace-switch ace-switch-6 subject-status" type="checkbox" /> <span class="lbl"></span>
					</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="addSubjectSaveBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="editSubjectModal" tabindex="-1" role="dialog"
		aria-labelledby="editSubjectModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="subjectStudentModal">修改科目信息</h4>
				</div>
				<div class="modal-body">
					<p>
						<label>科目编号</label> <input name="subId" type="text">
					</p>
					<p>
						<label>科目名</label> <input name="subName" type="text">
					</p>
					<p>
						<label>科目描述</label> <input name="description" type="text">
					</p>
					<p>
						<label>科目题数</label> <input name="testCount" type="text">
					</p>
					<p>
						<label>总时长</label> <input name="totalTime" type="text">
					</p>
					<p>
						<label>满分总分</label> <input name="totalScore" type="text">
					</p>
					<p>
						<label>是否开启考试</label> <input name="switch-field-1"
							class="ace ace-switch ace-switch-6 subject-status" type="checkbox" /> <span class="lbl"></span>
					</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="editSubjectSaveBtn">保存</button>
				</div>
			</div>
		</div>
	</div>



	<!-- /.main-container -->

	<!--[if !IE]> -->
	<script type="text/javascript">
		window.jQuery
				|| document
						.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery.min.js'>"
								+ "<"+"/script>");
	</script>

	<!-- <![endif]-->

	<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
	<script type="text/javascript">
		if ('ontouchstart' in document.documentElement)
			document
					.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery.mobile.custom.min.js'>"
							+ "<"+"/script>");
	</script>
	<script src="${pageContext.request.contextPath}/static/assets/js/bootstrap.min.js"></script>

	<!-- page specific plugin scripts -->
	<script src="${pageContext.request.contextPath}/static/assets/js/jquery.dataTables.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/assets/js/jquery.dataTables.bootstrap.js"></script>

	<!-- ace scripts -->
	<script src="${pageContext.request.contextPath}/static/assets/js/ace-elements.min.js"></script>

	<!-- inline scripts related to this page -->
	<script type="text/javascript">
		jQuery(function($) {
			var oTable1 = $('#sample-table-2')
			//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
			.dataTable({
				bAutoWidth : false,
				"aoColumns" : [ {
					"bSortable" : false
				}, null, null, null, null, null, {
					"bSortable" : false
				} ],
				"aaSorting" : [],

			//,
			//"sScrollY": "200px",
			//"bPaginate": false,

			//"sScrollX": "100%",
			//"sScrollXInner": "120%",
			//"bScrollCollapse": true,
			//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
			//you may want to wrap the table inside a "div.dataTables_borderWrap" element

			//"iDisplayLength": 50
			});
			/**
			var tableTools = new $.fn.dataTable.TableTools( oTable1, {
				"sSwfPath": "../../copy_csv_xls_pdf.swf",
			    "buttons": [
			        "copy",
			        "csv",
			        "xls",
					"pdf",
			        "print"
			    ]
			} );
			$( tableTools.fnContainer() ).insertBefore('#sample-table-2');
			 */

			$(document).on(
					'click',
					'th input:checkbox',
					function() {
						var that = this;
						$(this).closest('table').find(
								'tr > td:first-child input:checkbox').each(
								function() {
									this.checked = that.checked;
									$(this).closest('tr').toggleClass(
											'selected');
								});
					});

			$('[data-rel="tooltip"]').tooltip({
				placement : tooltip_placement
			});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				//var w2 = $source.width();

				if (parseInt(off2.left) < parseInt(off1.left)
						+ parseInt(w1 / 2))
					return 'right';
				return 'left';
			}

		})
	</script>

	<!-- the following scripts are used in demo only for onpage help and you don't need them -->

	<script type="text/javascript">
		ace.vars['base'] = '..';
	</script>
	<script src="${pageContext.request.contextPath}/static/assets/js/ace/elements.onpage-help.js"></script>
	<script src="${pageContext.request.contextPath}/static/assets/js/ace/ace.onpage-help.js"></script>
	<script src="${pageContext.request.contextPath}/static/docs/assets/js/rainbow.js"></script>
	<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/generic.js"></script>
	<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/html.js"></script>
	<%-- <script
		src="${pageContext.request.contextPath}/docs/assets/js/language/css.js"></script>
	<script
		src="${pageContext.request.contextPath}/docs/assets/js/language/javascript.js"></script> --%>
	<script type="text/javascript">
		$('.manage-subject-student-btn').click(function(){
			var subId = $(this).parent().parent().siblings().eq(0).text();
			$.ajax({
				type: "POST",
				url:  "${pageContext.request.contextPath}/teacher/getAllStudent",
				data: {
					subjectId: subId
					},
				dataType: "json",
				success: function(data){
					var htmlString = '';
					var selectedUser = data.selectedUser;
					for(var i = 0; i < data.allUser.length; i++){
						var user = data.allUser[i];
						var checked = '';
						for(var j = 0; j < selectedUser.length; j++) {
							if(selectedUser[j] == user.id){
								checked = 'checked="true"';
							}
						}
 						htmlString += '<div class="checkbox">';
						htmlString += '		<label>';
						htmlString += '			<input name="subjectStudents" class="ace ace-checkbox-2" type="checkbox" value="'
							+ user.id +'"'+ checked +' />';
						htmlString += '			<span class="lbl">' + user.name + '</sapn>';		
						htmlString += '		</label>';
						htmlString += '</div>';
					}
					
					$('#subjectStudentContent').html(htmlString);
					$('#subjectId').val(subId);
					}
			});
			$('#modalSubjectName').text($(this).parents('td').siblings('td').eq(1).text());
			$('#subjectStudentModal').modal('show');
			
		});

		$('#subjectStudentSaveBtn').on('click', function(){
				var subjectStudents = [];
				for(var i = 0; i < $('input[name="subjectStudents"]:checked').length; i++){
					subjectStudents[i] = $($('input[name="subjectStudents"]:checked')[i]).val();
				}
				$.ajax({
					type: "POST",
					url: "${pageContext.request.contextPath}/teacher/saveSubjectStudents",
					data: {
						subjectStudents: subjectStudents,
						subjectId: $('#subjectId').val()
					},
					dataType: "json",
					success: function(data){
						if(data == "success"){
							alert('成功');
							$('#subjectStudentModal').modal('hide');
						} else {
							alert('失败')
						}
						}
					});
			});
	</script>
	<script type="text/javascript">
		 $('.editSubject').click(function(){
			var subId = $(this).parent().parent().siblings().eq(0).text();
			$.ajax({
				type: "POST",
				url: "${pageContext.request.contextPath}/teacher/getSubjectById",
				data: {
					subId: subId
				},
				dataType: "json",
				success: function(data){
					$('#editSubjectModal input[name=subId]').val(data.id);
					$('#editSubjectModal input[name=subName]').val(data.name);
					$('#editSubjectModal input[name=description]').val(data.description);
					$('#editSubjectModal input[name=testCount]').val(data.testCount);
					$('#editSubjectModal input[name=totalTime]').val(data.totalTime);
					$('#editSubjectModal input[name=totalScore]').val(data.totalScore);
					if(data.status == 0){
						$('#editSubjectModal input[name="switch-field-1"]:checkbox').prop("checked", false);
						/*  $('#editSubjectModal input:checkbox')[0].checked = true;  */
					} else{
						$('#editSubjectModal input[name="switch-field-1"]:checkbox').prop("checked", true);
					} 
				}
			});
			$('#editSubjectModal').modal('show');
		});
		$('#editSubjectSaveBtn').click(function(){
			var subId = $('#editSubjectModal input[name=subId]').val();
			var subName = $('#editSubjectModal input[name=subName]').val();
			var description = $('#editSubjectModal input[name=description]').val();
			var testCount = $('#editSubjectModal input[name=testCount]').val();
			var totalTime = $('#editSubjectModal input[name=totalTime]').val();
			var totalScore = $('#editSubjectModal input[name=totalScore]').val();
			if($('#editSubjectModal input[name="switch-field-1"]:checkbox').is(":checked")){
				var status = 1;
			} else {
				var status = 0;
			}
			$.ajax({
				type: "POST",
				url: "${pageContext.request.contextPath}/teacher/editSubject",
				data: {
					id: subId,
					name: subName,
					description: description,
					testCount: testCount,
					totalTime: totalTime,
					totalScore: totalScore,
					status: status
				},
				success: function(data){
					if(data == "success"){
						alert('成功');
						$('.editSubjectModal').modal('hide');
					} else {
						alert('失败');
					}
				}
			});
		});
	</script>
	<script type="text/javascript">
		$('#addSubject').click(function(){
			$('#addSubjectModal').modal('show');
		});
		$('#addSubjectSaveBtn').click(function(){
			var subName = $('#addSubjectModal input[name=subName]').val();
			var description = $('#addSubjectModal input[name=description]').val();
			var testCount = $('#addSubjectModal input[name=testCount]').val();
			var totalTime = $('#addSubjectModal input[name=totalTime]').val();
			var totalScore = $('#addSubjectModal input[name=totalScore]').val();
			if( $('#addSubjectModal input[name="switch-field-1"]:checkbox').is(":checked")){
				var status = 1;
			} else {
				var status = 0;
			}
			$.ajax({
				type: "POST",
				url: "${pageContext.request.contextPath}/teacher/addSubject",
				data: {
					name: subName,
					description: description,
					testCount: testCount,
					totalTime: totalTime,
					totalScore: totalScore,
					status: status
				},
				success: function(data){
					if(data == "success"){
						alert('成功');
						$('#addSubjectModal').modal('hide');
					} else {
						alert('失败');
					}
				}
			});
		});
	</script>
</body>
</html>